<template>
	<div class="app-container">
		<div class="wx-user-box">
			<div class="wx-user-title">资源管理</div>
			<div class="search-box">
				<el-table :data="routes" style="width: 100%;margin-bottom: 20px;" row-key="id" border :tree-props="{ children: 'children', hasChildren: 'hasChildren' }">
					<el-table-column prop="name" label="名称" width="300px" />
					<el-table-column prop="type" label="菜单类型" >
						<template slot-scope="scope">
							<span>{{ getTypeName(scope.row) }}</span>
						</template>
					</el-table-column>
					<el-table-column prop="icon_cls" label="图标" >
						<template slot-scope="scope">
							<div class="icon-item">
								<svg-icon :icon-class="scope.row.icon_cls" class-name="disabled" />
								<span>{{ scope.row.icon_cls }}</span>
							</div>
						</template>
					</el-table-column>
					<el-table-column prop="sort" label="排序"  />
					<el-table-column prop="des" label="描述" />

					<el-table-column align="right" width="320px">
						<template slot="header">
							<el-button type="primary" icon="el-icon-circle-plus-outline" @click="Add()">添加路由</el-button>
						</template>
						<template slot-scope="scope">
							<!-- <el-button v-if="scope.row.type === 2" size="mini" type="primary" icon="el-icon-plus" @click="AddCol(scope.row.id)">添加子路由</el-button> -->
							<el-button size="mini" v-if="scope.row.tier != 3" type="primary" icon="el-icon-plus" @click="AddCol(scope.row.id)">添加子路由</el-button>
							<el-button size="mini" icon="el-icon-edit" @click="SetDate(scope.row)">编辑</el-button>
							<el-button size="mini" type="danger" icon="el-icon-delete" @click="Del(scope.row.id)">删除</el-button>
						</template>
					</el-table-column>
				</el-table>
			</div>
			<el-dialog title="添加路由" :visible.sync="centerDialogVisible" width="30%" center>
				<el-form ref="form" :model="form" label-width="150px">
					<el-form-item v-if="!form.pid && !isSet" label="菜单类型">
						<el-select filterable v-model="form.type" placeholder="请选择" style="width: 100%;">
							<el-option v-for="item in options" :key="item.type" :label="item.label" :value="item.type" />
						</el-select>
					</el-form-item>

					<el-form-item label="路由地址(path)"><el-input v-model="form.path" placeholder="permission" /></el-form-item>
					<!-- <el-form-item label="重定向地址(redirect)"><el-input v-model="form.redirect" placeholder="/permission/page" /></el-form-item> -->
					<!-- <el-form-item label="路由名称"><el-input v-model="form.name" placeholder="Permission" /></el-form-item> -->
					<el-form-item v-if="form.type === 1 || form.pid" label="页面路由"><el-input v-model="component" placeholder="@/views/permission/page" /></el-form-item>
					<el-form-item label="菜单名称"><el-input v-model="form.meta.title" /></el-form-item>
					<el-form-item label="图标">
						<el-select v-model="value" placeholder="请选择" clearable style="width: 100%;" filterable>
							<el-option v-for="(item, index) in cities" :key="index" :label="item" :value="item">
								<div class="icon-item">
									<svg-icon :icon-class="item" class-name="disabled" />
									<span>{{ item }}</span>
								</div>
							</el-option>
						</el-select>
					</el-form-item>
					<el-form-item label="描述信息"><el-input v-model="form.meta.describe" /></el-form-item>
					<el-form-item label="排序"><el-input v-model="form.meta.sort" type="Number" /></el-form-item>
					<el-form-item v-if="form.type === 1 || form.pid" label="是否固定在面包屑">
						<el-switch v-model="form.meta.affix" active-color="#13ce66" inactive-color="#999999" />
					</el-form-item>
					<el-form-item v-if="form.type === 1 || form.pid" label="是否缓存页面">
						<el-switch v-model="form.meta.noCache" active-color="#13ce66" inactive-color="#999999" />
					</el-form-item>
				</el-form>

				<span slot="footer" class="dialog-footer">
					<el-button @click="centerDialogVisible = false">取 消</el-button>
					<el-button type="primary" @click="submit">确 定</el-button>
				</span>
			</el-dialog>
		</div>
	</div>
</template>

<script>
import svgIcons from '@/views/icons/svg-icons';
import { addRole, del, getRolesList, getBackstage } from '@/api/role';
export default {
	name: 'Permission',
	data() {
		return {
			centerDialogVisible: false,
			options: [
				{
					type: 1,
					label: '主模块'
				},
				{
					type: 2,
					label: '主菜单'
				}
			],
			cities: svgIcons,
			value: '',
			typeName: {
				1: '主模块',
				2: '主菜单'
			},
			isSet: false,
			component: '',
			form: {
				id: '',
				pid: '',
				type: 1,
				path: '',
				component: '@/layout',
				// 当设置 true 的时候该路由不会在侧边栏出现 如401，login等页面，或者如一些编辑页面/edit/1
				hidden: false, // (默认 false)

				// 当设置 noRedirect 的时候该路由在面包屑导航中不可被点击
				redirect: '',

				// 当你一个路由下面的 children 声明的路由大于1个时，自动会变成嵌套的模式--如组件页面
				// 只有一个时，会将那个子路由当做根路由显示在侧边栏--如引导页面
				// 若你想不管路由下面的 children 声明的个数都显示你的根路由
				// 你可以设置 alwaysShow: true，这样它就会忽略之前定义的规则，一直显示根路由
				alwaysShow: true,
				children: [],
				name: '', // 设定路由的名字，一定要填写不然使用<keep-alive>时会出现各种问题
				meta: {
					describe: '', // 描述
					sort: 1, // 排序
					title: '', // 设置该路由在侧边栏和面包屑中展示的名字
					icon: '', // 设置该路由的图标，支持 svg-class，也支持 el-icon-x element-ui 的 icon
					noCache: true, // 如果设置为true，则不会被 <keep-alive> 缓存(默认 false)
					breadcrumb: true, //  如果设置为false，则不会在breadcrumb面包屑中显示(默认 true)
					affix: false // 若果设置为true，它则会固定在tags-view中(默认 false)

					// 当路由设置了该属性，则会高亮相对应的侧边栏。
					// 这在某些场景非常有用，比如：一个文章的列表页路由为：/article/list
					// 点击文章进入文章详情页，这时候路由为/article/1，但你想在侧边栏高亮文章列表的路由，就可以进行如下设置
					// activeMenu: '/article/list'
				}
			},
			routes: []
		};
	},
	created() {
		// Mock: get all routes and roles list from server
		this.getData();
		// getBackstage();
	},
	methods: {
		getTypeName(item) {
			let res = '';
			if (item.pid) {
				res = '';
			} else if (item.type === 2) {
				res = '主菜单';
			} else {
				res = '主模块';
			}
			return res;
		},
		// 还原数据格式
		initData() {
			this.component = '';
			this.form = {
				id: '',
				pid: '',
				type: 1,
				path: '',
				component: '@/layout',
				hidden: false, // (默认 false)
				redirect: '',
				alwaysShow: true,
				children: [],
				name: '', // 设定路由的名字，一定要填写不然使用<keep-alive>时会出现各种问题
				meta: {
					describe: '', // 描述
					sort: 1, // 排序
					title: '', // 设置该路由在侧边栏和面包屑中展示的名字
					icon: '', // 设置该路由的图标，支持 svg-class，也支持 el-icon-x element-ui 的 icon
					noCache: true, // 如果设置为true，则不会被 <keep-alive> 缓存(默认 false)
					breadcrumb: true, //  如果设置为false，则不会在breadcrumb面包屑中显示(默认 true)
					affix: false // 若果设置为true，它则会固定在tags-view中(默认 false)
				}
			};
		},
		// 添加
		Add() {
			this.initData();
			this.isSet = false;
			this.form.pid = '';
			this.centerDialogVisible = true;
		},
		// 添加子菜单
		AddCol(pid) {
			this.initData();
			this.isSet = false;
			this.form.type = 1;
			this.form.pid = pid;
			this.centerDialogVisible = true;
		},
		// 编辑
		SetDate(item) {
			this.isSet = true;
			const data = JSON.parse(item.url);
			if (item.type === 1) {
				this.component = data.children[0].component;
				this.form = {
					id: item.id,
					pid: item.pid || '',
					type: item.type,
					path: data.path,
					component: '@/layout',
					hidden: false, // (默认 false)
					redirect: '',
					alwaysShow: true,
					children: [],
					name: data.children[0].name, // 设定路由的名字，一定要填写不然使用<keep-alive>时会出现各种问题
					meta: {
						describe: item.des, // 描述
						sort: item.sort, // 排序
						title: data.children[0].meta.title, // 设置该路由在侧边栏和面包屑中展示的名字
						icon: data.children[0].meta.icon, // 设置该路由的图标，支持 svg-class，也支持 el-icon-x element-ui 的 icon
						noCache: data.children[0].meta.noCache, // 如果设置为true，则不会被 <keep-alive> 缓存(默认 false)
						breadcrumb: true, //  如果设置为false，则不会在breadcrumb面包屑中显示(默认 true)
						affix: data.children[0].meta.affix // 若果设置为true，它则会固定在tags-view中(默认 false)
					}
				};
			} else {
				this.form = {
					id: item.id,
					pid: '',
					type: 2,
					path: data.path,
					component: '@/layout',
					hidden: false, // (默认 false)
					redirect: '',
					alwaysShow: true,
					children: [],
					name: data.name, // 设定路由的名字，一定要填写不然使用<keep-alive>时会出现各种问题
					meta: {
						describe: item.des, // 描述
						sort: item.sort, // 排序
						title: data.meta.title, // 设置该路由在侧边栏和面包屑中展示的名字
						icon: data.meta.icon, // 设置该路由的图标，支持 svg-class，也支持 el-icon-x element-ui 的 icon
						breadcrumb: true, //  如果设置为false，则不会在breadcrumb面包屑中显示(默认 true)
						affix: data.meta.affix // 若果设置为true，它则会固定在tags-view中(默认 false)
					}
				};
			}
			this.value = this.form.meta.icon;
			this.centerDialogVisible = true;
		},
		// 删除
		Del(id) {
			del({ id: id }).then(res => {
				if (res.state) {
					this.$message({ message: res.msg, type: 'success' });
					this.getData();
				} else {
					this.$message({ showClose: true, message: res.msg, type: 'error' });
				}
			});
		},

		// 获取列表
		getData() {
			getRolesList({
				pageSize: 9999,
				pageNumber: 1
			}).then(res => {
				this.setCj(res.pageData.list);
				this.routes = res.pageData.list;
				console.log(this.routes)
			});
		},
		// 标识层级
		setCj(list) {
			list.forEach(item => {
				item['tier'] = 1;
				if(item.children) {
					let arr1 = item.children;
					arr1.forEach(item => {
						item['tier'] = 2;
						if(item.children) {
							let arr2 = item.children;
							arr2.forEach(item => {
								item['tier'] = 3;
							})
						}
					})
				}
			})
		},
		// 提交
		submit() {
			// if (!this.form.path) {
			// 	this.$message({ showClose: true, message: '请输入路由地址', type: 'error' });
			// 	return;
			// }
			if (this.form.type === 1 && !this.component) {
				this.$message({ showClose: true, message: '请输入页面路由', type: 'error' });
				return;
			}
			if (!this.form.meta.title) {
				this.$message({ showClose: true, message: '请输入菜单名称', type: 'error' });
				return;
			}
			// if (!this.form.name) {
			// 	this.$message({ showClose: true, message: '请输入路由名称', type: 'error' });
			// 	return;
			// }
			// if (!this.form.meta.icon) {
			// 	this.$message({ showClose: true, message: '请输入图标', type: 'error' });
			// 	return;
			// }
			// if (!this.form.meta.describe) {
			// 	this.$message({ showClose: true, message: '请输入描述', type: 'error' });
			// 	return;
			// }
			// if (!this.form.meta.sort) {
			// 	this.$message({ showClose: true, message: '请输入排序', type: 'error' });
			// 	return;
			// }
			this.form.name = this.form.path;
			this.form.meta.icon = this.value;
			if (this.form.type === 1) {
				const data = {
					id: this.form.id,
					pid: this.form.pid,
					type: this.form.type,
					path: this.form.path,
					component: '@/layout',
					children: [
						{
							path: 'index',
							component: this.component,
							name: this.form.name,
							meta: {
								title: this.form.meta.title,
								icon: this.form.meta.icon,
								affix: this.form.meta.affix,
								noCache: this.form.meta.noCache,
								describe: this.form.meta.describe, // 描述
								sort: +this.form.meta.sort // 排序
							}
						}
					]
				};
				addRole({
					data: JSON.stringify(data)
				}).then(res => {
					if (res.state) {
						this.centerDialogVisible = false;
						this.$message({ message: res.msg, type: 'success' });
						this.getData();
					} else {
						this.$message({ showClose: true, message: res.msg, type: 'error' });
					}
				});
			} else {
				addRole({
					data: this.form
				}).then(res => {
					if (res.state) {
						this.centerDialogVisible = false;
						this.$message({ message: res.msg, type: 'success' });
						this.getData();
					} else {
						this.$message({ showClose: true, message: res.msg, type: 'error' });
					}
				});
			}
		}
	}
};
</script>
<style></style>
